<template>
  <div class="introduce">
    <span style="font-size: 64px;color: white;margin-left: 28%;">Linter+Ai 编程学习利器</span>

    <div style="width: max-content;margin-left: 5%">
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo menu"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
          background-color="#6284AB"
          active-text-color="#FFFFFFFF"
      >
        <el-menu-item index="0" class="item"><el-icon><House /></el-icon>Home</el-menu-item>
        <el-menu-item index="1" class="item"><el-icon><Notebook /></el-icon>Note</el-menu-item>
        <el-menu-item index="2" class="item"><el-icon><DataLine /></el-icon>course</el-menu-item>
        <el-menu-item index="3" class="item"><el-icon><Box /></el-icon>model</el-menu-item>
        <el-menu-item index="4" class="item"><el-icon><ChatDotSquare /></el-icon>community</el-menu-item>
      </el-menu>
    </div>

    <div class="view">
      <home-function v-if="home"/>
      <note-function v-if="note"/>
      <course-function v-if="course"/>
      <model-function v-if="model"/>
      <community-function v-if="community" />
    </div>



    <div class="footer">
    </div>

  </div>
</template>

<script setup>
import {ref} from "vue";
import {Box, ChatDotSquare, DataLine, House, Notebook} from "@element-plus/icons-vue";
import NoteFunction from "@/components/Home/new/functionModule/noteFunction.vue";
import CourseFunction from "@/components/Home/new/functionModule/courseFunction.vue";
import ModelFunction from "@/components/Home/new/functionModule/modelFunction.vue";
import CommunityFunction from "@/components/Home/new/functionModule/communityFunction.vue";
import HomeFunction from "@/components/Home/new/functionModule/homeFunction.vue";

const activeIndex = ref("0")
let home = ref(true)
let note = ref(false)
let course = ref(false)
let model = ref(false)
let community = ref(false)
const handleSelect = (key, keyPath) => {
  switch (keyPath[0]){
    case "0":
      note.value = false
      course.value = false
      model.value = false
      community.value = false
      home.value = true
      console.log("展示首页功能")
      break;
    case "1":
      home.value = false
      course.value = false
      model.value = false
      community.value = false
      note.value = true
      console.log("展示笔记功能")
      break;
    case "2":
      note.value = false
      home.value = false
      model.value = false
      community.value = false
      course.value = true
      console.log("展示课程功能")
      break;
    case "3":
      note.value = false
      home.value = false
      course.value = false
      community.value = false
      model.value = true
      console.log("展示模型功能")
      break;
    case "4":
      note.value = false
      home.value = false
      course.value = false
      model.value = false
      community.value = true
      console.log("展示社区功能")
      break;
    default:
      console.log("出错！")
      break;
  }
}
</script>

<style scoped>
.introduce{
  width: 100%;
  height: 1100px;
  border-radius: 215px;
  background-color: #6284AB;
}
.item{
  font-size: 20px;
  padding: 0px 80px;
}
.menu{
  margin-top: 5%;
  width: max-content;
  padding: 0px 10px;
}
.view{
  border-radius: 115px;
  margin-top: 2%;
  margin-left: 5%;
  width: 90%;
  height: 800px;
  background-color: white;
}
</style>
